<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>裁剪</title>
		<style>
			img{
				vertical-align: middle;
			}
			:root{
				--m-w:400px
			}
			div{
				width: calc( 100% - 200px  );
				height: 300px;
				background-color:  var(--m-c,green) ;
				border: 10px solid #000;
				margin: 100px auto;
			}
			
		
		</style>
	</head>
	<body>
	
			<div>
				<!-- <img src="./image/6.jpg" alt=""> -->
			</div>


		<!-- 
		 clip-path
			矩形 裁剪  inset(距离元素上面的距离 距离元素右边的距离 距离元素下面的距离 距离元素左边的距离  round 圆角边框px)
			圆形裁剪   circle(圆的半径 at  圆心(x y))
		   椭圆裁剪    ellipse( 圆的水平半径 圆的垂直半径 at  圆心(x y) )
		   多边形的裁剪  polygon(a点x a点y,b点x b点y,c点x c点y,....依此类推)  
		变量 
		//在根目录创建变量
		:root{
			--m-c:#554fe5;
		}
		//在css里面使用变量
		border: 20px solid var( --m-c,red );
		
		计算函数  width:  calc(100% - 200px) ;
		 -->
	</body>
</html>